首先css參考看看就好(隨便配的)

<style>
    body{
        margin: 0;
        padding: 0;
        font-size: 0;
    }
    nav{
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 200px;
        background-color: rgb(108, 147, 255);
    }
    ul{
        font-size: 12px;
    }
    .close{
        font-size: 20px;
        text-align: right;
        padding: 10px;
        color: white;
    }
    .close span{
        cursor: pointer;
    }
</style>

將之前教的Alpine.js應用在側邊欄上吧

<div x-data="{isOpen:false}"  @click.away="isOpen=false">
    <button @click="isOpen=true">open</button>
    <nav x-show="isOpen">
        <div class="close"><span @click="isOpen=false">X</span></div>
        <ul>
            <li>項目一</li>
            <li>項目二</li>
            <li>項目三</li>
        </ul>
    </nav>
</div>

這作法很簡易，我們複習一下吧。
開關判斷只有isOpen的true/false，
@click.away="isOpen=false"讓滑鼠點擊外面時側邊欄也可以關起來，
顯示和影藏取決於x-show="isOpen"，
true的話就顯示;
false的話就影藏。
要加入動畫的話就改為x-show.transition，
至於要什麼動畫就自己排吧!
其他要注意的大概就只有click的對象了，
點擊什麼出現什麼，同樣的舉一反三就可以做到很多事了!